import React, { Component } from 'react'



// 只能后代捕获生命周期问题
class Parent extends Component {
    state={
        hasError:null,
        // users: [
        //     { name: 'xm', age: 12, id: 1 },
        //     { name: 'xh', age: 13, id: 3 },
        //     { name: 'xq', age: 14, id: 4 },
        // ]
        users:'aaa'
    }
    // 1.子组件报错调用
    static getDerivedStateFromError(error){
        console.log(error)
        return {hasError:error}
    }
    // 2.子组件出错调用，一般用于统计错误，发送给服务器
    componentDidCatch(){
        console.log(arguments)
    }
    render() {
        return (
            <div>
                Parent：
                {
                    this.state.hasError ? <h1>网络异常</h1>: <Child users={this.state.users}/>
                }
            </div>
        )
    }
}

class Child extends Component {
  
    render() {
        const {users} = this.props
        return (
            <div style={{marginLeft:'30px'}}>
                Child
                {
                    users.map(user=>{
                        return <p key={user.id}>{user.name}:{user.age}</p>
                    })
                }
            </div>
        )
    }
}


export default class ErrorBoundary extends Component {
    render() {
        return (
            <div>
                ccc
                <Parent/>
            </div>
        )
    }
}
